<template>
	<div class="box">
		<div class="left">
			<router-link to="/vue3-vite"> 跳转子应用vue3-vite</router-link>
			<br>
			<p @click="onauxclick" >跳转子应用vue3</p>
			<router-link to="/vue3"> 跳转子应用vue3</router-link>
			<br>
			<router-link to="/vite"> 跳转子应用vite</router-link>
			<br>
			<router-link to="/react"> 跳转子应用react</router-link>
			<br>
			<router-link to="/react-vite"> 跳转子应用react-vite</router-link>
			<!--		<router-link to="/jquery"> 跳转子应用jquery</router-link>-->
		</div>
		
		<div class="right">
			<router-view/>
		</div>
	</div>
</template>
<script setup>
import {onMounted} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();
const onauxclick = () => {
	router.push({
		path:'/vue3/page'
	})
}
</script>
<style>
.box {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: space-between;
}

.left {
	width: 200px;
	height: 100%;
	border-right: 1px solid #E6E6FA;
	box-sizing: border-box;
	padding: 60px 20px 20px;
}

.left a {
	display: inline-block;
	margin-bottom: 20px;
}

.right {
	width: calc(100% - 200px);
	height: 100%;
}
</style>


